<template>
  <div>
    <div class="block">
      <header>
        <h2 class="required">手术工具</h2>
      </header>
      <section>
        <el-row class="block-item">
          <el-col :span="24" class="right">
            <el-button type="primary" @click="onOpenToolsDialog">添加手术工具</el-button>
          </el-col>
        </el-row>
        <el-editable :columns="COLUMNS_PRODUCT" :payload="payload_tools" @reload="reloadData">
          <template v-slot:default-count="{ row }">
            <div>
              <el-input-number
                v-model="row.count"
                size="small"
                :min="1"
                :max="10"
                @change="onChangeCount"
              ></el-input-number>
            </div>
          </template>
          <template v-slot:default-opt="{ row, $index }">
            <a href="javascript:;" @click="onDeleteTool(row, $index)">删除</a>
          </template>
        </el-editable>
      </section>
    </div>
  </div>
</template>

<script>
import { UploadExcelDialogService } from '~/modules/upload/upload-excel.dialog.module';
import { ToolAddDialogService } from '~/modules/product/tool-add.dialog.module';
import * as CONSTS from './purchase-tools-list.const';
import ElEditable from '@components/el-editable';
import { IndexService } from './purchase-tools-list.service';
const service = new IndexService();
export default {
  components: {
    ElEditable
  },
  props: {
    tools: Array
  },
  computed: {
    uploadExcelDialogService: function() {
      return new UploadExcelDialogService(this.$axios);
    },
    toolAddDialogService: function() {
      return new ToolAddDialogService(this.$axios);
    }
  },
  data() {
    return {
      ...CONSTS,
      _tools: [],
      payload_tools: {},
      pager: {
        number: 1,
        size: 20
      }
    };
  },
  watch: {
    tools: {
      handler: function(val, oldVal) {
        if (val !== undefined) {
          this._tools = val;
          let startIndex = this.pager.number - 1;
          let endIndex = this.pager.size;
          this.payload_tools = service.getPayload(this._tools, this.pager, startIndex, endIndex);
        }
      },
      immediate: true
    }
  },
  methods: {
    //前端分页逻辑
    reloadData(pager) {
      let startIndex = (pager.number - 1) * pager.size;
      let endIndex = pager.number * pager.size;
      this.payload_tools = service.getPayload(this._tools, pager, startIndex, endIndex);
      this.pager = pager;
    },
    onDeleteTool(row, index) {
      let startIndex = (this.pager.number - 1) * this.pager.size;
      this._tools.splice(startIndex + index, 1);
      this.$emit('update:tools', this._tools);
    },
    onChangeCount() {
      this.$emit('update:tools', this._tools);
    },
    onOpenToolsDialog() {
      this.toolAddDialogService
        .create({
          title: '添加工具',
          query: {},
          confirmButtonClickHandler: (data = {}) => {
            // console.log(data);
            // console.log('取到数据了！');
          }
        })
        .mount();
    }
  }
};
</script>

<style></style>
